<template>
	<view class="content ss-m-20 bg_white ss-p-20">
		<view class="top ss-flex ss-row-between ">
			<view class="coupon color_3d">领券中心 领取大额优惠券</view>
			<view class="more ss-flex ss-row-left">
				<view class="more_text" @click="more">更多</view>
				<uni-icons type="right" size="16" class="icon" color="#868686"></uni-icons>
			</view>
		</view>
		<template v-if="state.list && state.list.length>0">
			<scroll-view class="scroll ss-m-t-20" scroll-x="true">
				<template v-for="(item,index) in state.list" :key="item.id">
					<view  class="item ss-r-16">
						<view class="title ss-row-c-c">{{item.name}}</view>
						<view class="amount ss-row-c-c color_18 ss-m-t-30"><text class="money">￥</text><text class="num">{{item.amount}}</text></view>
						<view class="limit ss-row-c-c color_18 ss-m-t-20">{{item.limit}}</view>
						<template v-if="item.is_expired==true">
							<view class="expired ss-row-c-c ss-m-t-30" >过期时间:2024.12.1</view>
						</template>
						<template v-else>
							<view class="receive ss-row-c-c ss-p-10 ss-m-t-10" @click="receive(item,index)">点击领取</view>
						</template>
					</view>
				</template>
			</scroll-view>
		</template>
	</view>
	
	<su-popup :show="state.show" round="10" type="bottom" @close="state.show = false">
			<view class="pop-view ss-flex-col">
				<view class="top ss-flex-row ss-row-between ss-col-center ss-p-30">
					<view class="left"></view>
					<view class="title color_3d">优惠券</view>
					<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/default/202407260937389063.png" mode="aspectFit" class="icon" @tap="state.show=false"></image>
				</view>
				<scroll-view  scroll-y="true" class="scroll-Y">
					<template v-for="(item,index) in state.pop_list">
						<view class="list ss-flex-row ss-row-between ss-col-center ss-m-20">
							<view class="limit ss-flex-col ss-row-center ss-col-center">
								<view class="amount"><text class="money">¥</text><text class="num">{{item.amount}}</text></view>
								<view class="condition ss-m-t-10">{{item.limit}}</view>
							</view>
							<view class="expired ss-flex-col ss-row-center ss-col-left">
								<view class="label">{{item.name}}</view>
								<view class="time ss-m-t-20">{{item.expired}} 到期</view>
							</view>
							<view class="btn ss-m-r-20" v-if="item.is_expired==false" @tap="unlock(item,index)">待解锁</view>
							<image v-else src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/default/202407260958361434.png" mode="aspectFit" class="receive"></image>
						</view>
					</template>
				</scroll-view>
			</view>	
	</su-popup>
</template>

<script setup>
	//首页优惠券列表组件
	import {
			reactive,			
			ref
		} from 'vue';
	import sheep from '@/sheep';
	
	const props = defineProps({
		data:{
			type:Array,
			default:[]
		}
	})
	
	//emit事件
	const emits = defineEmits(['receive','more'])

	const state = reactive({
		list:[
			{id:1,name:"洗护优惠券",amount:15,limit:"无门槛",expired:"2024.12.1",is_expired:false,},
			{id:2,name:"商城优惠券",amount:20,limit:"满减200",expired:"2024.12.1",is_expired:true,},
			{id:3,name:"洗护优惠券",amount:100,limit:"无门槛",expired:"2024.12.1",is_expired:false,},
			{id:4,name:"商城优惠券",amount:1500,limit:"满减400",expired:"2024.12.1",is_expired:true,},
			],
		pop_list:[
			{id:1,name:"宠物15元优惠券-百亿补贴",amount:15,limit:"满39可用",expired:"2024.12.1",is_expired:false,},
			{id:2,name:"宠物10元优惠券-百亿补贴",amount:10,limit:"满79可用",expired:"2024.12.1",is_expired:true,},
			{id:3,name:"宠物3元优惠券-百亿补贴",amount:3,limit:"满3可用",expired:"2024.12.1",is_expired:false,},
			],	
		show:false,	
	})
	
	//更多按钮点击事件
	const receive=(item,index)=>{
		emits('receive',index);
	}
	
	const more = ()=>{
		state.show = true;
	}
	
	const unlock=(item,index)=>{
		console.log(item,index)
	}
	
	
</script>

<style lang="scss" scoped>	
.bg_white{
	background-color: white;
	
}	
.content{
	font-family: PingFang SC;
	box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
	border-radius: 16rpx;
	width:calc(100vw - 80rpx);
	.top{
		width:calc(100vw - 80rpx);
		.coupon{
			font-size: 30rpx;
			font-weight: 600;
			line-height: 42rpx;
			letter-spacing: -0.6px;
		}
		.more{
			.more_text{
				font-size: 24rpx;
				line-height: 30rpx;
				text-align: center;
				letter-spacing: -0.6px;
			}
			.icon{
				margin-left: -4rpx;
			}
		}
	}
}

.scroll {
	white-space: nowrap;
	width: 100%;
}

.item {
	display: inline-block;
	width: 240rpx;
	height: 240rpx;
	margin-right: 20rpx;
	background: #FEF2F2;
	font-family: PingFang SC;
	.title{
		background: linear-gradient(270deg, #FE29B8 0%, #FF7604 100%);
		color:white;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		padding:10rpx;
	}
	.amount{
		color:#F84F18;
		line-height: 30rpx;
		letter-spacing: -1.5rpx;
		.money{
			font-size: 26rpx;
		}
		.num{
			font-size: 50rpx;
		}
	}
	.limit{
		font-size: 24rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
	}
	.expired{
		font-size: 16rpx;
		line-height: 30rpx;
		letter-spacing: 0em;
		color: #9A9997;
	}
	
	
	
	.receive{
		background: linear-gradient(270deg, #FE29B8 0%, #FF7604 100%);
		border-radius: 0 0 16rpx 16rpx;
		font-size: 28rpx;
		font-weight: normal;
		letter-spacing: 0em;
		color: #FFFFFF;
	}
}

.color_3d{
	color: #3D3D3D;
}

.ss-row-c-c{
	display: flex;
	justify-content: center;
	align-items: center;
}

.color_18{
	color:#F84F18;
}

.pop-view{
	background-color: #F4F4F4;
	width:100%;
	font-family: PingFang SC;
	border-radius: 16rpx 16rpx 0 0;
	height:700rpx;
	overflow-y: scroll;
	.top{
		height:50rpx;
		.icon{
			width:40rpx;
			height:40rpx;
		}
		.title{
			font-size: 28rpx;
			letter-spacing: 1rpx;
			font-weight: 600;
			color: #3D3D3D;
		}
	}
	
	.list{
		background: #ffffff;
		width:calc(100vw - 40rpx);
		height:200rpx;
		border-radius: 16rpx;
		.limit{
			height:140rpx;
			width:170rpx;
			color:#F84F18;
			.amount{
				
				.money{
					font-size: 26rpx;
				}
				.num{
					font-size: 50rpx;
				}
			}
			.condition{
				font-size: 24rpx;
				line-height: 30rpx;
				letter-spacing: 1rpx;
			}
		}
		.expired{
			height:140rpx;
			width:340rpx;
			.label{
				color: #3D3D3D;
				font-size: 28rpx;
				letter-spacing: 0em;
			}
			.time{
				font-size: 20rpx;
				line-height: 30rpx;
				letter-spacing: 0em;
				color: #9A9997;
			}
		}
		.receive{
			height: 130rpx;
			width:130rpx;
			align-self:flex-start;
			
		}
		.btn{
			background-color: #E95200;
			color:#ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: Source Han Sans;
			font-size: 24rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: 0em;
			color: #FDFDFD;
			width:130rpx;
			height:50rpx;
			border-radius: 25rpx;;
		}
	}
	
}
.scroll-Y{
	height:600rpx;
}

</style>